<template>
  <el-scrollbar class="event-flow-info">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="20" v-if="orderData.alarmLableRelDTOS?.length">
        <template slot="title">
          <CustomTitle name="告警标签" />
        </template>
        <AlarmLabelInfo :tags="orderData.alarmLableRelDTOS" />
      </el-collapse-item>
      <!--事件信息-->
      <el-collapse-item name="1">
        <template slot="title">
          <CustomTitle name="事件信息" />
        </template>
        <alarm-info
          :orderData.sync="orderData"
          :warningTypeList="warningTypeList"
          :position="position"
          :positionMonitor="positionMonitor"
          :horiAzimuthAngle.sync="horiAzimuthAngle"
          hiddenTitle
          :showAddressWord="showAddressWord"
          :isDetail="alarmInfoStatus"
          @mapCancel="isMapCancelFun"
          v-on="$listeners"
        />
      </el-collapse-item>
      <!--情报来源信息（AI）-->
      <el-collapse-item name="2">
        <template slot="title">
          <CustomTitle name="告警来源" />
        </template>
        <alarm-source
          :horiAzimuthAngle="horiAzimuthAngle"
          :reldeviceData="reldevice"
          :orderData="orderData"
          :positionMonitor="positionMonitor"
          hiddenTitle
        />
      </el-collapse-item>
      <div v-for="(item, index) in dataInfo" :key="index">
        <!-- 研判信息 -->
        <el-collapse-item :name="3 + index" v-if="item.realLinkType == '1'">
          <template slot="title">
            <CustomTitle name="研判信息" />
          </template>
          <judge-info :judgeData="[item]" />
        </el-collapse-item>
        <!-- 调度信息 -->
        <el-collapse-item :name="3 + index" v-if="item.realLinkType == '2'">
          <template slot="title">
            <CustomTitle name="调度信息" />
          </template>
          <dispatch-info :dispatchData="[item]" />
        </el-collapse-item>
        <!-- 处置信息 -->
        <el-collapse-item :name="3 + index" v-if="item.realLinkType == '4'">
          <template slot="title">
            <CustomTitle name="处置信息" />
          </template>
          <dispost-info :dealData="[item]"></dispost-info>
        </el-collapse-item>
        <!-- 核实信息 -->
        <el-collapse-item :name="3 + index" v-if="item.realLinkType == '5'">
          <template slot="title">
            <CustomTitle name="核实信息" />
          </template>
          <check-info :checkData="[item]" />
        </el-collapse-item>
      </div>
      <el-collapse-item v-if="getRecycleBinPage() === '12'" name="delete">
        <template slot="title">
          <CustomTitle name="删除信息" />
        </template>
        <DeleteInfo :orderData="orderData" />
      </el-collapse-item>
      <el-collapse-item v-if="getRecycleBinPage() === '13'" name="transfer">
        <template slot="title">
          <CustomTitle name="转移记录" />
        </template>
        <Transfer :orderData="orderData" />
      </el-collapse-item>
      <el-collapse-item
        v-if="isCustOperate && orderData.judgeResult !== '3'"
        name="judgeRecording"
      >
        <template slot="title">
          <CustomTitle name="研判记录" />
        </template>
        <JudgeRecording :orderData="orderData" />
      </el-collapse-item>
    </el-collapse>
  </el-scrollbar>
</template>

<script>
import AlarmInfo from "@/components/eventManagement/infos/AlarmInfo";
import AlarmSource from "@/components/eventManagement/infos/AlarmSource";
import JudgeInfo from "@/components/eventManagement/infos/JudgeInfo.vue";
import DispatchInfo from "@/components/eventManagement/infos/DispatchInfo.vue";
import CheckInfo from "@/components/eventManagement/infos/CheckInfo.vue";
import DispostInfo from "@/components/eventManagement/infos/DispostInfo.vue";
import AlarmLabelInfo from "@/components/eventManagement/infos/alarmLabelInfo.vue";
import CustomTitle from "@/components/eventManagement/Title.vue";
import DeleteInfo from "@/components/eventManagement/infos/deleteInfo.vue";
import Transfer from "@/components/eventManagement/infos/Transfer";
import JudgeRecording from "@/components/eventManagement/infos/JudgeRecording.vue";

import { getRecordByOrderIdAsc } from "@/api/modules/eventManagement/eventCheck";
import {
  findOrderAlarm,
  getRegion,
} from "@/api/modules/eventManagement/eventJudge";
import { $getUrlParam } from "@/utils/common";
import {
  getHoriAzimuthAngle,
  getTwoPointAngle,
} from "@/utils/countAngleDistance";
import { getGridInfoByLongitudeAndLatitude } from "@/api/modules/eventManagement/eventManagement";
import eventBus from "@/utils/event-bus";
export default {
  name: "eventFLowInfo",
  inject: ["isCustOperate", "isEventQuery"],
  props: [
    "orderData",
    "warningOrderId",
    "reldevice",
    "monitors",
    "positionMonitor",
    "position",
    "horiAzimuthAngle",
  ],
  components: {
    AlarmInfo,
    AlarmSource,
    JudgeInfo,
    DispatchInfo,
    CheckInfo,
    DispostInfo,
    AlarmLabelInfo,
    CustomTitle,
    DeleteInfo,
    Transfer,
    JudgeRecording,
  },
  data() {
    return {
      dataInfo: [], // 环节信息展示数组
      activeNames: [], // 自动展开的折叠面板
      warningTypeList: [],
      page: null,
      countyList: [],
      cityList: [],
      provinceList: [],
    };
  },
  computed: {
    alarmInfoStatus() {
      return !this.isCustOperate && !this.$store.getters.userInfo.tenantId; // 铁塔视角不包含运营研判
    },
    showAddressWord() {
      return (
        !(
          this.isCustOperate ||
          (this.$store.getters.userInfo.tenantId &&
            $getUrlParam("page") !== "12" &&
            $getUrlParam("page") !== "13")
        ) ||
        (this.isCustOperate &&
          (this.orderData.judgeResult !== "3" ||
            this.orderData.editFlag !== "1"))
      );
    },
  },
  watch: {
    warningOrderId: {
      handler(val) {
        if (!val) {
          return;
        }
        if (
          (this.isEventQuery && $getUrlParam("isDetail") !== "1") ||
          $getUrlParam("page") === "12" ||
          $getUrlParam("page") === "13"
        ) {
          this.getLinksInfo();
        }
        this.addTypeList();
      },
      immediate: true,
    },
  },
  mounted() {
    this.findOriginalTypeList();
    if (!this.isEventQuery) {
      this.activeNames = ["1", "2", "delete", "transfer", "judgeRecording"];
    }
  },
  methods: {
    /**
     * 获取回收站page页签id 11（告警压制） 12（删除告警） 13（转移告警）
     * @returns {string|string}
     */
    getRecycleBinPage() {
      return $getUrlParam("page");
    },
    //经纬度和地址回显
    async isMapCancelFun(data) {
      if (data) {
        if (data.distanceFun && this.orderData.warningSource !== "9") {
          // 获取水平方位角
          const angle = getTwoPointAngle(
            this.positionMonitor,
            [data.longitude, data.latitude],
            data.distanceFun
          );
          this.$set(
            this.orderData,
            "horiAzimuthAngle",
            getHoriAzimuthAngle(Number(angle))
          );
        }
        this.$set(
          this.orderData,
          "longitude",
          parseFloat(data.longitude).toFixed(9)
        );
        this.$set(
          this.orderData,
          "latitude",
          parseFloat(data.latitude).toFixed(9)
        );
        await this.getGridInfo();
        //如果市为空，让区赋值给你市（直辖市特殊操作）
        if (data.city == "") {
          data.city = data.district;
        }
        //省
        this.onLoadData_province(() => {
          for (let i = 0; i < this.provinceList.length; i++) {
            if (this.provinceList[i].code === data.province) {
              this.$set(
                this.orderData,
                "provinceId",
                this.provinceList[i].code
              );
              break;
            }
          }
          this.onLoadData_city(this.orderData.provinceId, () => {
            for (let i = 0; i < this.cityList.length; i++) {
              if (this.cityList[i].code === data.city) {
                this.$set(this.orderData, "cityId", this.cityList[i].code);
                break;
              }
            }
            this.onLoadData_county(this.orderData.cityId, () => {
              for (let i = 0; i < this.countyList.length; i++) {
                if (this.countyList[i].code === data.district) {
                  this.$set(
                    this.orderData,
                    "countyId",
                    this.countyList[i].code
                  );
                  break;
                }
              }
            });
          });
        });
        this.$set(this.orderData, "provinceName", data.province);
        this.$set(this.orderData, "cityName", data.city);
        this.$set(this.orderData, "countyName", data.district);
        this.$set(this.orderData, "address", data.address);
      }
    },
    onLoadData_province(fun) {
      getRegion({ areaLevel: 2 }).then((result) => {
        if (result.code === 200) {
          this.provinceList = [];
          for (let i = 0; i < result.data.length; i++) {
            let row = result.data[i];
            if (row.areaLevel === "2") {
              this.provinceList.push({
                label: row.areaName,
                code: row.areaCode,
              });
            }
          }
          if (fun) fun();
        }
      });
    },
    onLoadData_city(id, fun) {
      getRegion({ areaLevel: 3, areaParentCode: id }).then((result) => {
        if (result.code === 200) {
          this.cityList = [];
          for (let i = 0; i < result.data.length; i++) {
            let row = result.data[i];
            this.cityList.push({
              label: row.areaName,
              code: row.areaCode,
            });
          }
          if (fun) fun();
        }
      });
    },
    onLoadData_county(id, fun) {
      getRegion({ areaLevel: 4, areaParentCode: id }).then((result) => {
        if (result.code === 200) {
          this.countyList = [];
          for (let i = 0; i < result.data.length; i++) {
            let row = result.data[i];
            this.countyList.push({
              label: row.areaName,
              code: row.areaCode,
            });
          }
          if (fun) fun();
        }
      });
    },
    /**
     * 根据经纬度获取网格信息
     */
    async getGridInfo() {
      let params = {
        deviceLongitude:
          this.orderData.deviceLongitude || this.orderData.videoLongitude,
        deviceLatitude:
          this.orderData.deviceLatitude || this.orderData.videoLatitude,
        longitude: this.orderData.longitude,
        latitude: this.orderData.latitude,
        tenantId:
          this.$store.getters.userInfo.tenantId || this.orderData.tenantId,
        industryCode: this.$store.getters.userInfo.industryCode,
      };
      let result = await getGridInfoByLongitudeAndLatitude(params);
      if (result.code == 200) {
        this.$set(this.orderData, "gridId", result.data.gridId);
        this.$set(
          this.orderData,
          "incidentDistance",
          result.data.incidentDistance
        );
        this.$set(this.orderData, "gridName", result.data.gridName);
        this.$set(this.orderData, "keeperName", result.data.keeperName);
        this.$set(this.orderData, "gridInfo", result.data);
        this.$set(this.orderData, "updateAddress", true);
        this.$nextTick(() => {
          eventBus.$emit("changeAlarmPlace", null);
        });
      }
    },
    /**
     * 查询告警类型集合
     */
    findOriginalTypeList() {
      const _this = this;
      findOrderAlarm({ findFlag: "1" }).then((resp) => {
        // findFlag
        if (resp && resp["code"] === 200 && resp.data.length > 0) {
          _this.warningTypeListOld = resp.data;
          _this.warningTypeList = resp.data;
        }
      });
    },
    /**
     * 无匹配告警类型时的处理(解决客户拥有某告警类型时推送的告警事件一直没研判，订购告警类型到期后，研判页面告警类型显示value问题)
     */
    addTypeList() {
      const _this = this;
      let num = 0;
      if (
        _this.warningTypeList.length < 0 ||
        _this.orderData.warningTypeId == ""
      ) {
        return;
      } else {
        for (let i in _this.warningTypeList) {
          let value = "";
          value = _this.warningTypeList[i].typeValue.toString();
          if (value == _this.orderData.warningTypeId) {
            num = 0;
            return;
          } else {
            num++;
          }
        }
      }
      if (num > 0) {
        var typeArr = {};
        typeArr.typeValue = _this.orderData.warningTypeId;
        typeArr.typeName = _this.orderData.warningTypeName;
        _this.warningTypeList.push(typeArr);
      }
    },
    /**
     * 获取环节信息
     */
    getLinksInfo() {
      getRecordByOrderIdAsc({ orderId: this.warningOrderId }).then((res) => {
        if (res.code == 200) {
          this.dataInfo = res.data.rows.filter((item) => {
            if (item.realLinkType != -1 && item.enableAcceptanceMode != "2") {
              if (item.enableAcceptanceMode == "3") {
                return item;
              }
              if (item.flowEndTime) {
                return item;
              }
            }
          });
          console.log(this.dataInfo, "this.dataInfo");
          if (this.dataInfo.length < 2) {
            let tempList = ["1", "2"];
            this.activeNames.push(...tempList);
          }
          this.activeNames.push(this.dataInfo.length + 2);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.event-flow-info {
  width: 100%;
  height: 100%;
  padding-right: 12px;
  ::v-deep .el-collapse {
    border: none;

    .el-collapse-item__wrap {
      border: none;
    }

    .el-collapse-item__header {
      height: unset;
      line-height: unset;
      border: none;
    }
    .el-form-item__label {
      padding-right: 12px;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .el-collapse-item {
      .el-icon-arrow-right:before {
        font-weight: bold;
        color: #606266;
        font-size: 16px;
      }
    }
  }
  //滚动条的宽度
  ::v-deep .el-scrollbar__wrap::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    display: none;
  }
}
</style>
